<script setup>
import StratchCard from "@/components/scratchCard.vue";
import markImg from "@/assets/image/mark.png";
import { ref } from "vue";
const show = ref(true);

const scratchStart = () => {
  console.log("scratchStar1t");
};
const scratchEnd = () => {
  console.log("scratchEnd2");
};
const scratchAll = () => {
  console.log("scratchAll3");
  show.value = false;
  setTimeout(() => {
    show.value = true;
  }, 500);
};

const prizeList = ["01", "09", "45", "92"];
</script>

<template>
  <div class="content-box">
    <StratchCard
      v-if="show"
      maskColor="gray"
      fillStyle="red"
      font="30px 微软雅黑"
      text="来刮我的吧"
      :radius="5"
      :scratchRadius="10"
      :imageUrl="markImg"
      :scratchPercent="80"
      @scratchStart="scratchStart"
      @scratchEnd="scratchEnd"
      @scratchAll="scratchAll"
    >
      <!-- 自定义奖品内容插槽 -->
      <div class="prize">
        <div class="number-box">
          <div class="number" v-for="item in prizeList">{{ item }}</div>
        </div>
        <!-- <img class="bc-image" src="../assets/image/backgroud.png" alt="" /> -->
      </div>
    </StratchCard>
  </div>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.content-box {
  position: fixed;
  left: 50px;
  top: 200px;
}
.prize {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.number-box {
  background: url("@/assets/image/backgroud.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;

  .bc-image {
    width: 100%;
    height: 100%;
  }

  .number {
    padding: 20px;
    border-radius: 50%;
    border: 5px solid blue;
  }
}

.stratch-box {
  width: 200px;
  overflow: hidden;
  height: 200px;
}
</style>
